<script setup>
import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const viewData = ref([]);
const para = ref({
    num: null,
    name: null
});

const obj = ref({
    time: [],
    num: null,
    name: null,
    beginTime: null,
    endTime: null,
    baseMoney: null,
    rewardMoney: null,
    penaltyMoney: null,
    achievementMoney: null,
    attendanceDeduction: null,
    perfectAttendance: null,
    postMoney: null,
    overtimeMoney: null,
    wage: null
});

const showDetails = ref(false);
const pageInfo = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 0
});


let getList = () => {
    axios({
        method: "POST",
        url: `/api/wageStatistic/list`,
        data: {
            ...para.value,
            ...pageInfo
        }
    }).then((resp) => {
        if (resp.data.code === 200) {
            if (resp.data.data === null) {
                ElMessage.error("没有查到任何数据!");
            } else {
                viewData.value = resp.data.data.list;
                pageInfo.total = resp.data.data.count ? resp.data.data.count : 0;
            }

        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    })
};

const selectobj = () => {
    getList();
};

const statistic = () => {
    axios({
        method: "GET",
        url: "/api/wageStatistic/wageCount",
        data: obj.value
    }).then((resp) => {
        if (resp.data.code === 200) {
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });
};

const handleDetails = (row) => {
    showDetails.value = true;
    obj.value = row;
};

const handleDelete = (row) => {
    axios({
        url: "/api/wageStatistic/delete/" + row.id,
        method: "delete"
    }).then((resp) => {
        if (resp.data.code === 200) {
            ElMessage.info(`删除成功`);
            getList();
        } else {
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });
};

onMounted(() => {
    getList();
});
</script>

<template>
    <div>
        <header class="header">
            <div class="wrapper">
                <div>
                    <span>员工编号:</span>
                    <el-input v-model="para.num" size="small"></el-input>
                </div>
                <div>
                    <span>员工姓名:</span>
                    <el-input v-model="para.name" size="small"></el-input>
                </div>
            </div>
            <div class="w-button">
                <el-button @click="selectobj">查询</el-button>
                <el-button @click="statistic">统计</el-button>
            </div>
        </header>

        <main>
            <el-table :data="viewData">
                <el-table-column prop="num" label="员工编号"></el-table-column>
                <el-table-column prop="name" label="员工姓名"></el-table-column>
                <el-table-column prop="beginTime" label="开始时间"></el-table-column>
                <el-table-column prop="endTime" label="结束时间"></el-table-column>
                <el-table-column prop="wage" label="总工资"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleDetails(scope.row)">详情</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </main>

        <footer>
            <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
                @size-change="getList" @current-change="getList" />

        </footer>
        <el-dialog v-model="showDetails">
            <div>
                <span>基础工资:</span>
                <el-input v-model="obj.baseMoney" readonly></el-input>
            </div>
            <div>
                <span>职务补贴:</span>
                <el-input v-model="obj.postMoney" readonly></el-input>
            </div>
            <div>
                <span>奖金:</span>
                <el-input v-model="obj.rewardMoney" readonly></el-input>
            </div>
            <div>
                <span>罚款:</span>
                <el-input v-model="obj.penaltyMoney" readonly></el-input>
            </div>
            <div>
                <span>绩效奖金:</span>
                <el-input v-model="obj.achievementMoney" readonly></el-input>
            </div>
            <div>
                <span>考勤扣款:</span>
                <el-input v-model="obj.attendanceDeduction" readonly></el-input>
            </div>
            <div>
                <span>全勤奖:</span>
                <el-input v-model="obj.perfectAttendance" readonly></el-input>
            </div>
            <div>
                <span>加班费:</span>
                <el-input v-model="obj.overtimeMoney" readonly></el-input>
            </div>
            <div>
                <span>总工资:</span>
                <el-input v-model="obj.wage" readonly></el-input>
            </div>
        </el-dialog>

    </div>
</template>

<style scoped>
.header {
    display: flex;
    flex-direction: column;
}

.wrapper {
    display: flex;
    flex-direction: row;
}

.wrapper>div {
    display: flex;
    flex-direction: row;
    margin-right: 1vw;
    gap: 0.5vw;
}

.wrapper>div>span {
    flex: 0 0 auto;
    /* flex-basis: auto; */
    /* flex-shrink: 0; */
}

.w-button {
    display: flex;
    flex-direction: row;
}

.w-button>button {
    margin-right: 1vw;
}
</style>